<template>
	<view>
		<view class="top">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<!-- <view class="top-box">
				<view class="top-box-logo">
					<image src="../../static/logo@3x.png"></image>
				</view>
				<view class="search">
					<u-search shape="square" placeholder="点击购买商品" animation="false" disabled @click="gotoSearch" height="80"
					bg-color="#F8F8F8" color="#ccc"></u-search>
				</view>
			</view> -->
			<view class="logo" v-show="!shopShow">
				<image src="../../static/logo@3x.png" mode="aspectFit"></image>
			</view>
			<!-- <view class="login-tip" v-show="isLogin" @click="toPage('/subPackages/login/login')">
				<view>
					<u-icon name="volume-up" style="margin-right: 6rpx;"></u-icon>
					<text>登录后，享受更多服务</text>
				</view>
				<view>
					<text style="margin-right: 6rpx;">去登录</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view> -->
			<view class="search">
				<u-search shape="square" placeholder="点击购买商品" animation="false" disabled @click="gotoSearch" height="80"
					bg-color="#F8F8F8" color="#ccc"></u-search>
			</view>
			<view class="body-box">
				<view class="sort-nav">
					<u-tabs :list="goodsTypeList" :current="active" @change="changeActive()" inactive-color="#999"
						active-color="#333"></u-tabs>
				</view>
				<view class="list-box">
					<view v-if="goodsList.length" v-for="(item, index) in goodsList" :key="index">
						<view class="card-item" @click="toMallItemlDetail(item)">
							<image :src="item.images[0].url" mode="" class="img"></image>
							<view class="card-right">
								<view class="card-title line1">
									{{ item.name }}
								</view>
								<view class="card-desc line2">
									{{ item.description }}
								</view>
								<view class="card-bot flex fjb">
									<view class="card-bot-left">
										<text class="icon">￥</text>
										<text class="num">{{ item.minPrice }}</text>
									</view>
									<image src="/static/jiagou.png" style="width: 48rpx;height: 48rpx;"
										@click.stop="addCart(item)"></image>
								</view>
							</view>
						</view>

					</view>
					<view class="empty_box" v-else>
						<image src="../../static/empty_box.png" mode=""></image>
						<text>暂无商品</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		goodsItem
	} from '../../components/goodItem.vue'
	import {
		mapState
	} from 'vuex'
	import {
		getGoodsListApi,
		getGoodsClassApi
	} from '.../../common/API/goodsApi.js'
	import {
		onLoad
	} from 'uview-ui/libs/mixin/mixin';
	import {
		addCartApi,
		getCartListApi,
	} from '../../common/API/cartApi.js'
	export default {
		components: {
			goodsItem
		},
		data() {
			return {
				goodsList: [
					// {
					// 	name: '泡脚桶',
					// 	images: [{
					// 		url: '/static/ceshi.png'
					// 	}],
					// 	description: '派适度曲风，活血消肿、治疗腰肌劳损，跌打损伤，ask的风景阿斯利康大家发看了就爱上对方啊拉开圣诞节回复ask点击返回啊手动阀撒地方',
					// 	unitPrice: 59.9
					// },
					// {
					// 	name: '泡面',
					// 	images: [{
					// 		url: '/static/ceshi.png'
					// 	}],
					// 	description: '好吃康师傅',
					// 	unitPrice: 5
					// }
				],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				active: 0,
				goodsTypeList: [],
				showList: [],
				isLogin: false
			};
		},
		computed: {
			...mapState('user', ['ylEnterprise'])
		},
		methods: {
			gotoSearch() {
				uni.navigateTo({
					url: '/subPackages/search/search'
				})
			},
			async getGoodsClass() {
				const res = await getGoodsClassApi()
				if (res.status === 200) {
					res.data.forEach(item => {
						if (item.children) {
							item.children.forEach(item2 => this.goodsTypeList.push(item2))
						}
					})
				} else {
					uni.$showMsg(res.message)
				}
			},
			async getGoodsList() {
				const res = await getGoodsListApi({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					salesType: '1',
					categoryId: this.goodsTypeList[this.active].id,
					// 销售类型0-批发1-零售
					enterpriseCode: this.ylEnterprise.enterpriseCode
				})
				this.goodsList.push(...res.data.records)
				this.total = res.data.total
			},
			async changeActive(index) {
				console.log('下表', index)
				// await this.$refs.uWaterfall.clear();
				this.active = index
				this.goodsList = []
				this.total = 0
				this.pageNum = 1
				await this.getGoodsList()
				// this.goodsTypeList.forEach((item, index) => {
				// 	if (index === this.active) {
				// 		this.showList = this.goodsList.filter(item2 => item2.categoryId === item.id)
				// 	}
				// })
			},
			toGoodDetail(code) {
				uni.navigateTo({
					url: `/subPackages/goodsDetail/goodsDetail?code=${code}`
				})
			},

			toMallItemlDetail(item) {
				uni.navigateTo({
					url: `/subPackages/mallItemDetial/mallItemDetial?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			async addCart(item) {
				const res = await addCartApi({
					number: 1,
					commodityCode: item.productAttrValues[0].skuCode,
					commodityName: item.name,
					integral: item.integral || '',
					uniqueId: item.code,
					itemArr: item.productAttrValues[0].skuValue,
					picUrl: item.images[0].url || '',
					price: item.minPrice,
					enterpriseCode: this.ylEnterprise.enterpriseCode,
					enterpriseName: this.ylEnterprise.enterpriseName,
					isGroupBuying: item.salesType == '2' ? 0 : 1, //0团购				
				})
				if (res.status == 200) {
					uni.$showMsg('添加到购物车')
					this.navShow = false
					this.getCartList()
				}
			},
			async getCartList() {
				const res = await getCartListApi(this.ylEnterprise.enterpriseCode)

				if (res.status == 200) {
					this.cartList = res.data || []
					console.log('购物车信息', JSON.stringify(this.cartList))

					if (this.cartList.length > 0) {
						console.log('购物车商品数', JSON.stringify(this.cartList.length))
						uni.setTabBarBadge({
							index: 2,
							text: this.cartList.length.toString()
						})
					} else {
						// console.log('购物车没数据了')
						uni.removeTabBarBadge({
							index: 2
						})
					}
				}
			}
		},
		async onLoad() {
			if (uni.getStorageSync('changeEnterprise') || this.goodsList.length == 0 || this.goodsTypeList.length ==
				0) {
				Object.assign(this.$data, this.$options.data())
				await this.getGoodsClass()
				await this.getGoodsList()
				// await this.changeActive(0)
				uni.setStorageSync('changeEnterprise', false)
			}
		},
		onShow() {
			if (!uni.getStorageSync('ylToken')) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}

		},
		onHide() {
			// Object.assign(this.$data, this.$options.data())
		},
		// async onPullDownRefresh() {
		// 	Object.assign(this.$data, this.$options.data())
		// 	await this.getGoodsClass()
		// 	await this.getGoodsList()
		// 	await this.changeActive(0)
		// 	uni.stopPullDownRefresh()
		// },
		onReachBottom() {
			if (this.goodsList.length >= this.total) {
				return uni.$showMsg('已经到底了')
			}
			this.pageNum = this.pageNum + 1
			this.getGoodsList()
		}
	}
</script>
<style>
	page {
		/* height: 100%; */
	}
</style>
<style lang="scss" scoped>
	.top {
		width: 100%;
		height: 316rpx;
		background: #0091D7;

		.nav-title {
			display: flex;
			justify-content: center;

			.enterprise-box {
				padding: 0 32rpx;
				flex: 1;
				color: #fff;
				display: flex;
				align-items: center;
			}


		}

		.logo {
			flex: 1;
			width: 450rpx;
			height: 80rpx;
			margin: 32rpx 0 40rpx 32rpx;

			image {
				width: 120%;
				height: 120%;
			}

			.hemei {
				color: #FFFFFF;
				font-weight: 500;
				font-size: 44rpx;
			}
		}
	}

	// .page {
	// 	min-height: 100%;
	// }
	.search {
		margin: 10rpx 32rpx 30rpx 32rpx;

		/deep/ .u-content {
			border-radius: 20rpx !important;
		}
	}

	.my-search-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		background-color: transparent;
		padding: 10rpx 20px;
		box-sizing: border-box;

		.my-search-box {
			display: flex;
			// justify-content: center;
			align-items: center;
			padding-left: 20rpx;
			height: 80rpx;
			width: 100%;
			border-radius: 20rpx;
			background-color: #f8f8f8;

			.my-search-text {
				color: #ccc;
				margin-left: 6rpx;
			}
		}
	}

	.sort-nav {
		width: 100%;
		margin-bottom: 15rpx;
	}

	// u-waterfall样式
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.top-box-logo {
		top: 76rpx;
		left: 20rpx;
		position: absolute;
		width: 70%;
		height: 90rpx;
		background-size: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top-box {
		background-image: url(../../static/bg@2x.png);
		height: 316rpx;
		margin-top: -1rpx;
		padding-top: 170rpx;
	}

	.body-box {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		// padding: 0 10rpx;
		margin-top: -10rpx;

		/deep/ .u-tabs {
			border-radius: 20rpx 20rpx 0 0;
		}

		/deep/ .u-tab-item {
			// color: black !important;
		}

		/deep/ .u-tab-bar {
			width: 30rpx !important;
			border-radius: 0 !important;
			color: #0091D7 !important;
			background-color: #0091D7 !important;
			height: 10rpx !important;
		}
	}
</style>